<template>
  <div>
    <a-form :model="form" layout="vertical">
      <a-form-item label="检查时间">
        <a-select
          style="width: 200px"
          :options="dateOptions"
          :model-value="dateModelValue"
          @change="getData"
        ></a-select>
      </a-form-item>
      <template v-if="noData">
        <a-image src="./../../../../src/assets/images/no-data.png"></a-image>
      </template>
      <template v-else>
        <a-form-item label="药物过敏史：">
          <dict-tag :options="drugAllergy" :value="form.drugAllergy" />
        </a-form-item>
        <a-form-item label="既往病史：">
          {{ form.pastMedicalHistory }}
        </a-form-item>
        <a-form-item label="现病史：">
          {{ form.nowMedicalHistory }}
        </a-form-item>
        <a-form-item label="术前检查图片：">
          <a-image-preview-group infinite>
            <a-space>
              <a-image
                v-for="(item, index) in form.pictureAddress"
                :key="index"
                :src="item"
                width="250"
                height="140"
              />
            </a-space>
          </a-image-preview-group>
        </a-form-item>
        <a-form-item label="术前检查表格：">
          <excel-table
            v-for="(item, index) in form.formAddress"
            :key="index"
            :src="item"
          ></excel-table>
        </a-form-item>
        <a-form-item label="备注：">
          {{ form.remark }}
        </a-form-item>
      </template>
    </a-form>
    <!--  -->
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { getOperSearchBefore, getBeforeDate } from '@/api/operSearch';
  import { Message } from '@arco-design/web-vue';
  import { getDict } from '@/utils/dict';
  import { parseTime } from '@/utils/index';

  export default defineComponent({
    props: {
      id: {
        type: [String, Number, Array],
        default: 0,
      },
    },
    setup: (props) => {
      const dict = getDict('drug_allergy');
      const form: any = ref({});
      const noData: any = ref(false);
      const dateOptions: any = ref([]);
      const dateModelValue: any = ref();
      const getData = async (createTime: any) => {
        dateModelValue.value = createTime;
        const { code, msg, rows } = await getOperSearchBefore({
          userId: props.id,
          createTime,
        });
        if (code !== 200) {
          Message.error(msg);
        }
        if (rows.length <= 0) {
          Message.warning('没有查询到该用户的数据');
          noData.value = true;
          return;
        }
        noData.value = false;
        const [x] = rows;
        if (x.pictureAddress) {
          x.pictureAddress = x.pictureAddress.split(',').map((item: any) => {
            return `${import.meta.env.VITE_API_BASE_URL}${item}`;
          });
        }
        if (x.formAddress) {
          x.formAddress = x.formAddress.split(',').map((item: any) => {
            return `${import.meta.env.VITE_API_BASE_URL}${item}`;
          });
        }
        if (x.drugAllergy) {
          x.drugAllergy = x.drugAllergy.split(',');
        }
        form.value = {
          ...x,
        };
      };
      // getData();
      getBeforeDate({
        userId: props.id,
      }).then(({ code, msg, data }) => {
        if (code !== 200) {
          Message.error(msg);
        }
        if (data.length <= 0) {
          Message.warning('没有查询到该用户的数据');
          noData.value = true;
          return;
        }
        noData.value = false;
        dateOptions.value = data
          .map((item: { createTime: any }) =>
            parseTime(item.createTime, '{y}-{m}-{d}')
          )
          .sort(
            (a: any, b: any) => new Date(b).getTime() - new Date(a).getTime()
          )
          .map((item: any) => ({
            label: item,
            value: item,
          }));
        getData(dateOptions.value[0].value);
      });
      return {
        form,
        drugAllergy: dict.drug_allergy,
        dateOptions,
        dateModelValue,
        getData,
        noData,
      };
    },
  });
</script>

<style></style>
